<template>
  <div id="echartContainer3">

    <dv-active-ring-chart :config="config"/>
  </div>
</template>

<script>

  export default {
    name: 'component3',
    props: {
      languageCounts: {
        default: function () {
          return [0, 0, 0, 0, 0, 0]
        }
      }
    },
    data() {
      return {
        config: {
          data: [
            {value: 11, name: 'Java'},   //value ->C  name ->B
            {value: 15, name: 'PHP'},
            {value: 7, name: 'C++'},
            {value: 4, name: 'iOS'},
            {value: 3, name: 'Python'},
            {value: 3, name: 'Js'},
          ],
          lineWidth: 15,
          radius: '68%',
          activeRadius: '78%',
          activeTimeGap: 2000,
          animationCurve: 'easeInOutSine',
          animationFrame: 20,
          color: ['#4DFFF2', '#53E2FF', '#4DB8E8', '#6193FF', '#554BEB', '#9A4AFF']
        }
      }
    },
    methods: {},
    mounted() {
      //调用drawBarChart()
      // this.drawBarChart();
    },
    watch: {
      languageCounts: function () {

        let config = {
          data: [
            {value: 12, name: 'Java'},   //value ->C  name ->B
            {value: 15, name: 'Php'},
            {value: 7, name: 'C++'},
            {value: 4, name: 'iOS'},
            {value: 3, name: 'Python'},
            {value: 3, name: 'Js'},
          ],
          lineWidth: 15,
          radius: '68%',
          activeRadius: '78%',
          activeTimeGap: 2000,
          animationCurve: 'easeInOutSine',
          animationFrame: 20,
          color: ['#4DFFF2', '#53E2FF', '#4DB8E8', '#6193FF', '#554BEB', '#9A4AFF']
        };
        if (!this.languageCounts[0]) {
          return false
        }
        console.info("LanguageCounts Changed");
        let dataset = [
          {value: this.languageCounts[0], name: 'Java'},
          {value: this.languageCounts[1], name: 'Php'},
          {value: this.languageCounts[2], name: 'C++'},
          {value: this.languageCounts[3], name: 'iOS'},
          {value: this.languageCounts[4], name: 'Python'},
          {value: this.languageCounts[5], name: 'Js'}
        ];

        config.data = dataset;
        this.config = config

      }
    },
  };
</script>
<style scoped>
  #echartContainer3 {
    width: 100%;
    height: 100%;
  }

  #echartContainer3 b {
    color: white;
    font-size: 18px;
  }

  .dv-active-ring-chart {
    width: 100%;
    height: 100%;
  }
</style>
